<script lang="ts" setup>
import { ref,watch} from 'vue'
import type { CardDetail, CardParams} from '@/types/card';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import { createCardAPI, getCardDetailAPI, updateCardAPI } from '@/apis/card';
import { useRoute, useRouter } from 'vue-router';

//  Partial  范型工具 -> 把所有字段都添加 ? 可选
const carInfoForm = ref<Partial<CardParams>>({
    personName: '',
    phoneNumber: '',
    carNumber: '',
    carBrand:''
})
const carRules = ref<FormRules<CardParams>>({
    personName: [
        { required: true, message: '请输入车主姓名', trigger: 'blur' },
    ],
    phoneNumber: [
        { required: true, message: '请输入联系方式', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
    ],
    carNumber: [
        { required: true, message: '请输入车牌号', trigger: 'blur' },
        { pattern: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳]$/, message: '请输入正确的车牌号码', trigger: 'blur' }
    ],
    carBrand: [
        { required: true, message: '请输入车辆品牌', trigger: 'blur' }
    ]
})

//表单2
const feeForm = ref<Partial<CardParams>>({
    cardStartDate: '',
    cardEndDate: '',
    paymentAmount: '',
    paymentMethod: 'Alipay',
})
//支付方式列表
const payMethodList = [
    {id:'Alipay','name':'支付宝'},
    {id:'WeChat','name':'微信'},
    {id:'Cash、','name':'线下'},

]
const cardDateArr = ref<string[]>([])
watch(cardDateArr, (val) => {
    // console.log(val);
    
    if (val) {
        feeForm.value.cardStartDate = val[0]
        feeForm.value.cardEndDate = val[1]
    } else {
        feeForm.value.cardStartDate = ''
        feeForm.value.cardEndDate = ''
    }
}, { deep: true })

const feeFormrules = ref<FormRules<CardParams>>({
    cardEndDate: [
        { required: true, message: '请选择有效日期', trigger: 'blur' },
    ],
    paymentAmount: [
        { required: true, message: '请输入支付金额', trigger: 'blur' },
    ],
    paymentMethod: [
        { required: true, message: '请选择支付方式', trigger: 'change' },
    ]
})

const carInfoFormref=ref<FormInstance>()
const feeFormref =ref<FormInstance>()
const onsubmit = async () => {
    try {
        await Promise.all([
            carInfoFormref.value?.validate(),
            feeFormref.value?.validate()
            //调用接口 把数据提交给后端 
        ])
        if (route.params.id) {
            // 有 id 是编辑月卡
            await updateCardAPI({
                ...carInfoForm.value,
                ...feeForm.value,
                ...editForm.value
            })
        } else {
            // 无 id 才是添加月卡
            await createCardAPI({
                ...carInfoForm.value,
                ...feeForm.value
            })
        }
        ElMessage.success(route.params.id ? '编辑成功' : '添加成功')
        router.back()
    } catch {
        
    }
}
//重置表单
const onReset = () => {
    // resetFields	将值重置为初始值，并移除校验结果
    carInfoFormref.value?.resetFields()
    feeFormref.value?.resetFields()
    cardDateArr.value = []
}
const router = useRouter()

//获取月卡详情 数据回显
const getDetailData = async () => {
    // 根据 id 获取月卡详情
    const res = await getCardDetailAPI(route.params.id as string)
    console.log(res);
    
    // 提取表单所需的数据
    // 提取表单所需的数据，提取所有数据，分配到三个表单中
    const { personName, phoneNumber, carNumber, carBrand, cardStartDate, cardEndDate, paymentAmount, paymentMethod, carInfoId, rechargeId } = res.data
    // 绑定到表单1回显
    carInfoForm.value = { personName, phoneNumber, carNumber, carBrand }
    // 绑定到表单2回显
    feeForm.value = { cardStartDate, cardEndDate, paymentAmount, paymentMethod }
    // 单独处理日期 picker 数据（前后端数据不一致，特殊情况特殊处理）
    cardDateArr.value = [cardStartDate, cardEndDate]
    // 绑定到表单3，编辑时，所需的两个 id（看不到的表单）
    editForm.value = { carInfoId, rechargeId }
}

//获取路由参数
const route =useRoute()
if (route.params.id) {
    getDetailData()
}

// 表单3: 编辑时，所需的两个 id（看不到的表单）
const editForm = ref<Partial<CardDetail>>({
    carInfoId: undefined,
    rechargeId: undefined
})
</script>

<template>
    <div class="add-card">
        <header class="add-header">
            <el-page-header :content="$route.params.id?'编辑月卡':'添加月卡'" @back="$router.back()" />
        </header>
        <main class="add-main">
            <div class="form-container">
                <div class="title">车辆信息</div>
                <div class="form">
                    <el-form ref="carInfoFormref" label-width="100px" :model="carInfoForm" :rules="carRules">
                        <el-form-item label="车主姓名" prop="personName">
                            <el-input v-model="carInfoForm.personName" />
                        </el-form-item>
                        <el-form-item label="联系方式" prop="phoneNumber">
                            <el-input v-model="carInfoForm.phoneNumber" />
                        </el-form-item>
                        <el-form-item label="车辆号码" prop="carNumber">
                            <el-input v-model="carInfoForm.carNumber" />
                        </el-form-item>
                        <el-form-item label="车辆品牌" prop="carBrand">
                            <el-input v-model="carInfoForm.carBrand" />
                        </el-form-item>
                        {{ carInfoForm }}
                    </el-form>
                </div>
            </div>
            <div class="form-container">
                <div class="title">最新一次月卡缴费信息</div>
                <div class="form">
                    <el-form ref="feeFormref" :model="feeForm" :rules="feeFormrules" label-width="100px">
                        <el-form-item label="有效日期" prop="cardEndDate">
                            <el-date-picker v-model="cardDateArr" value-format="YYYY-MM-DD" type="daterange"
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
                        </el-form-item>
                        <el-form-item label="支付金额" prop="paymentAmount">
                            <el-input v-model="feeForm.paymentAmount" placeholder="请输入金额" />
                        </el-form-item>
                        <el-form-item label="支付方式" prop="paymentMethod">
                            <el-select v-model="feeForm.paymentMethod">
                                <el-option v-for="item in payMethodList" :key="item.id" :value="item.id"
                                    :label="item.name" />
                            </el-select>
                        </el-form-item>
                        {{ feeForm }} {{cardDateArr }}

                    </el-form>
                </div>
            </div>

        </main>
        <footer class="add-footer">
            <div class="btn-container">
                <el-button @click="onReset()">重置</el-button>
                <el-button @click="onsubmit()" type="primary">确定</el-button>
            </div>
        </footer>
    </div>
</template>

<style scoped lang="scss">
.add-card {
    background-color: #f4f6f8;
    height: 100vh;

    .add-header {
        display: flex;
        align-items: center;
        padding: 0 20px;
        height: 64px;
        background-color: #fff;

        .left {
            span {
                margin-right: 4px;
            }

            .arrow {
                cursor: pointer;
            }
        }

        .right {
            text-align: right;
        }
    }

    .add-main {
        background: #f4f6f8;
        padding: 20px 130px;

        .form-container {
            background-color: #fff;

            .title {
                height: 60px;
                line-height: 60px;
                padding-left: 20px;
            }

            .form {
                margin-bottom: 20px;
                padding: 20px 65px 24px;

                .el-form {
                    display: flex;
                    flex-wrap: wrap;

                    .el-form-item {
                        width: 50%;
                    }
                }
            }
        }

        .preview {
            img {
                width: 100px;
            }
        }
    }

    .add-footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 24px 50px;
        color: #000000d9;
        font-size: 14px;
        background: #fff;
        text-align: center;
    }
}
</style>